<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>04猜数字</title>
    </head>
    <body>
        <h3>已生成一个1~100之间的随机数</h3>
        <input type="text" placeholder="请输入你猜的数字">
        <button onclick="guess()">点击我验证</button>
        <h3>小提示：<span></span></h3>

        <script>
            //1.生成随机数：1~100之间：
            let r = parseInt(Math.random()*100)+1;
            console.log('打个小抄：'+r);
            //定义猜的次数
            let count = 0;
            function guess(){
                let n = document.querySelector('input').value;
                //判断输入内容是否是数字
                if (isNaN(n)){
                    alert('请输入数字');
                    return;
                }
               //获取用来显示结果的span元素
                let spanE =document.querySelector('span');
               //没猜对一次，次数加1
                count++;
                if (n>r){
                    spanE.innerHTML='猜大了';
                }else if (n<r) {
                    spanE.innerHTML='猜小了';
                }else {
                    spanE.innerHTML = '恭喜你用了'+count+'次猜对了';
                }
                //输完数字后输入框清空
                document.querySelector('input').value='';
            }





            /* function guess(){
                 let n = document.querySelector('input').value;
                 let spanE =document.querySelector('span');
                  n1 = parseFloat(n);
                 if (n1>r){
                     spanE.innerHTML='猜大了';
                 }else if (n1<r) {
                     spanE.innerHTML='猜小了';
                 }else {
                     spanE.innerHTML = '猜对了';
                 }
             }
 */
        </script>
    </body>
</html>